<template>
<div >
  <el-card >
    <el-form :inline="true" :model="searchForm">
      <!--状态-->
<!--      <el-form-item label="状态:">-->
<!--        <el-select v-model="searchForm.state" placeholder="选择线索状态">-->
<!--          <el-option v-for="(state,index) in state" :key="index" :label="state" :value="index"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <!--      类型-->
      <el-form-item label="类型:">
        <el-select v-model="searchForm.type" placeholder="选择线索类型">
          <el-option v-for="(type,index) in type" :key="index"  :label="type" :value="index"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="编号:">
        <el-input placeholder="请输入编号" v-model="searchForm.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input placeholder="请输入姓名" v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话:">
        <el-input placeholder="请输入电话" v-model="searchForm.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Search">查询</el-button>
        <el-button type="success" @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="Clue"
        style="width: 100%;"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        border>
      <el-table-column
          prop="clueId"
          label="编号"
          width="180"
      >
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="80"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status==0">待受理</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="type"
          width="80"
          label="类型">
      </el-table-column>
      <el-table-column
          prop="name"
          width="80"
          label="上报姓名">
      </el-table-column>
      <el-table-column
          prop="phone"
          width="120"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="clueDescribe"
          label="描述"
          width="200"
      >
        <template v-slot="scope">
          <el-popover
              width="200"
              trigger="hover"
              placement="left"
              v-model="scope.row.showTooltip"
              :open-delay="500"
              :disabled="!scope.row.showTooltip"
          >
            <div>{{ scope.row.clueDescribe }}</div>
            <div slot="reference" @mouseenter="showTips($event,scope.row)" class='myNote'>{{ scope.row.clueDescribe }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址" width="200">
      </el-table-column>

      <el-table-column label="线索详情" width="200">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="details(scope.row)">查看详情</el-button>
<!--          <el-button type="warning" size="small" @click="SeeMap(scope.row)">查看地图</el-button>-->
        </template>
      </el-table-column>


      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button type="primary" size="small" style="width: 80px;height: 32px;" v-if="scope.row.status==0" @click="SignClue(scope.row)">签收
          </el-button>
<!--          <el-button type="primary" size="small" v-else @click="changeSignClue(scope.row)">取消签收</el-button>-->
<!--          <el-button type="success" size="small" @click="editClue(scope.row)">修改</el-button>-->
<!--          <el-button type="danger" size="small" @click="deleClue(scope.row)">删除</el-button>-->
<!--          <el-button type="info" size="small" @click="feedbackClue(scope.row)">反馈</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <div class="block" style="margin-top: 20px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          :current-page="pagenum"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
      <!--    弹窗-->
      <el-dialog :before-close="handleClose" title="线索类型修改" :visible.sync="Typedialog" width="20%">
        <el-form :model="Typeform">
          <el-form-item label="线索状态">
            <el-select v-model="Typeform.type" placeholder="选择线索类型" @change="TypeChange">
              <el-option v-for="(type,index) in type" :label="type"  :key="index" :value="index"></el-option>

            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Typedialog = false">取 消</el-button>
          <el-button type="primary" @click="Typedialogsub">确 定</el-button>
        </div>
      </el-dialog>
      <!--    反馈-->
      <el-dialog title="线索反馈" :visible.sync="Fankuidialog" width="30%" @close="closeFankuidialog()">
        <el-form :model="Fanform">
          <el-form-item label="反馈信息:" label-width="80px">
            <el-input v-model="Fanform.text" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Fankuidialog = false">取 消</el-button>
          <el-button type="primary" @click="Fankuidialog = false">确 定</el-button>
        </div>
      </el-dialog>
<!--    视频弹窗-->
<!--    <el-dialog title="视频详情" :visible.sync="videoDialog" width="40%" @close="closevideoDialog">-->
<!--      <video :src="videoUrl" controls autoplay class="video" :ref="dialogVideo"-->
<!--             width="100%"></video>-->
<!--    </el-dialog>-->
    <el-drawer
        title="线索详情"
        :visible.sync="drawer"
        @close="drawerClose"
    >
      <el-tag style="margin:0 0 10px 26px;font-size: 16px">线索图片</el-tag>
      <div class="img-list">
        <el-image style=" width: 250px;
  height: 125px;
  margin: 7px;"  v-for="(image,index) in drawerFrom.imglist" :key="index" :src="image"   :preview-src-list="image | filterImg">
        </el-image>
      </div>
      <el-tag style="margin:10px 0 10px 26px;font-size: 16px">线索视频</el-tag>
      <div class="video">
        <video v-if="drawerFrom.radioUrl" :src="drawerFrom.radioUrl" style="width:500px;height:250px;" controls="controls">
        </video>
        <div v-else style="width: 500px;height: 250px;line-height: 250px;text-align: center;border: 1px solid #ccc">
          暂无视频
        </div>

      </div>
      <el-tag style="margin:10px 0 10px 26px;font-size: 16px">线索反馈</el-tag>
       <el-card style="margin: 0 26px 0 26px;">{{drawerFrom.clueBack}}</el-card>
    </el-drawer>
  </el-card>
</div>
</template>

<script>
export default {
  name: "Clue",
  data(){
    return {
      judge: false,
      pagenum: 1,
      pagesize: 7,
      total: 0,
      drawer: false,//详情弹窗
      drawerFrom: {
        imglist: [],
        radioUrl: '',
        clueBack: ''
      },
      videoDialog: false,//video弹窗
      videoUrl: '', // 存储用户点击的视频播放链接
      type: ['治安', '涉恐', '涉爆', '其他'],
      state: ['待受理', '审查中', '已采纳', '未采纳'],
      Fankuidialog: false,
      Fanform: {
        id: '',
        text: ''
      },
      Typedialog: false,
      Typeform: {
        id: "",
        type: ''
      },
      searchForm: {
        name: '',
        phone: '',
        id: '',
        type: '',
        state: ''
      },
      Clue: [
        {
          no: 123,
          state: "未签收",
          time: '2022-01-01 12:00:00',
          type: '治安',
          name: '周凯尖',
          phone: 17386282871,
          describe: '新华社广州12月10日电 近期，一些城市医院发热门诊患者明显增加。对此，中国工程院院士钟南山9日在接受记者采访时表示，发热患者应根据自身情况居家隔离，或到医院进一步检查。',
          address: '鱼峰区柳州市明翔机械配件厂(九头山路北)',
          img: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://tse3-mm.cn.bing.net/th/id/OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo?pid=ImgDet&rs=1', 'https://tse3-mm.cn.bing.net/th/id/OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo?pid=ImgDet&rs=1', 'https://tse3-mm.cn.bing.net/th/id/OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo?pid=ImgDet&rs=1'],
          video: 'http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2022/9/22/ZongBianShi-YangGuangYu_ea7852c0bcfa84991733d1b7709dbedd.mp4',
          fankui: "因为是从两头向里进行遍历，所以不需要遍历整个字符串，只需遍历一半即可，这样在极端情况（str是回文字符串时）下就能节约一半的遍历时间。\n" +
              "通过一个strLength变量存储字符串的长度，之后在需要使用字符串长度的地方替换使用strLength ，这样能避免频繁访问str所造成的性能影响，不过这种影响是微乎其微的，这里只是想到了，所以就简单说一下。\n" +
              "————————————————\n" +
              "版权声明：本文为CSDN博主「海底烧烤店ai」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。\n" +
              "原文链接：https://blog.csdn.net/m0_51969330/article/details/127825386"
        },
      ]
    };

  },
  created() {
   this.getAllClueList()//获取所有线索列表
  },
  filters: {
    filterImg(item) {
      if (typeof item === "string") {
        return item.split("|");
      }else{
        return item
      }
    },
  },
  mounted() {
    // this.$refs.btn.onclik(function() {
    //   if (this.$refs.dialogVideo.paused) {
    //     this.$refs.dialogVideo.play();
    //   } else {
    //     this.$refs.dialogVideo.pause();
    //   }
    // });
  },
  methods:{
    //点击进入地图
    SeeMap(){

    },
    //侧边栏关闭回调
    drawerClose(){
      this.drawerFrom=false
   this.drawerFrom={
     imglist:[],
     radioUrl:'',
     clueBack:''
      }
    },
    details(row) {
        this.drawer=true
      this.drawerFrom.imglist.push(row.image1,row.image2,row.image3,row.image4)
      this.drawerFrom.radioUrl=row.radioUrl
      this.drawerFrom.clueBack=row.clueBack
      console.log(row)
      console.log(this.drawerFrom,'drawerFrom')
    },
    getAllClueList: function () {
      this.$axios({
        method: 'post',
        url: '/api/web/getWebClueByStatusIsZero',
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          curPage: this.pagenum,
          pageSize: this.pagesize
        }
      }).then(res => {
        console.log(res.data);
        this.Clue = res.data.data
        this.total=res.data.count
      })

    },
    // closevideoDialog(){
    //   this.videoUrl=""
    // },
    // // 查看视频
    // playVideo(row) {
    //   this.videoUrl = row.video//存储用户点击的视频播放链接
    //   this.videoDialog = true
    // },

    handleSizeChange(val){
   this.pagesize=val
      console.log(this.judge)
if(this.judge==true){
  this.Search()
}else{
  this.getAllClueList();
}
    },
    handleCurrentChange(val){
    this.pagenum=val
      console.log(this.judge)
      if(this.judge==true){
        this.Search()
      }else{
        this.getAllClueList();
      }
    },
    //关闭反馈弹窗回调
    closeFankuidialog(){
   this.Fanform={
     id:'',
        text:''
      }
    },
    //关闭修改弹窗回调
    handleClose(){
      this.Typedialog=false
    },
    //签收/web/editWebClue
    SignClue(row){
      console.log(row.clueId)
      this.$axios({
        url: '/api/web/editWebClue',
        method:'POST',
        params: {
          clueId: row.clueId,
          status: 1,
        },
      }).then(res=>{
        console.log(res)
        this.$message.success('签收成功')
        this.getAllClueList();
      })
    },
    editClue(e){
      this.Typeform.type=JSON.parse(JSON.stringify(e.type))
      this.Typeform.id=JSON.parse(JSON.stringify(e.no))
      this.Typedialog=true
    },
    //修改类型
    TypeChange(){
    },
    //修改确定
    Typedialogsub(){
      if(typeof(this.Typeform.type)=="string"){
        this.Typeform.type=this.Typeform.type
      }else {
        this.Typeform.type=this.type[this.Typeform.type]
      }
      // this.Typeform.type=this.type[this.Typeform.type]
      console.log(this.Typeform)


   this.Typedialog=false
    },
    //删除
    deleClue(e){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(()=>{
            this.$axios.post('/del',e.id).then((res)=>{
              if(res.status){
                this.$message.success("删除成功")
              }else {
                this.$message.error("网络错误")
              }
            })
          })
          .catch(()=>{
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          })
    },
    //反馈
    feedbackClue(){
   this.Fankuidialog=true
    },
    //查询
    Search(){
      this.judge = true;
      var types =this.type[this.searchForm.type] || "";
      this.$axios({
        method: "post",
        url: "/api/web/getWebClue",
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          clueId:this.searchForm.id,
          name:this.searchForm.name,
      phone:this.searchForm.phone,
          type:types,
          curPage: this.pagenum,
          pageSize: this.pagesize,

        }
      }).then((res)=>{
        console.log(res)
           if(res.status==200){
               this.$message.success('查询成功')
             this.Clue = res.data.data
             this.total=res.data.count

           }
      }).catch((err)=>{
          this.$message.error(err)
      })
    },
    Reset() {
      this.searchForm={
        name: '',
        phone: '',
        id: '',
        type: '',
        state: ''
      }
      this.judge=false
this.getAllClueList()
    },
    showTips(obj, row){
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = row.clueDescribe;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
    }
  }
}
</script>
<style scoped>
.myNote{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
.el-form-item {
   margin-bottom: 20px;
}
.img-list{
display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.video{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
